<template>
    <div
        class="content-wrap flex"
        :class="{
            'justify-end': !isLeft,
        }"
    >
        <div class="content" v-if="item.msgtype === 'text'">{{ item.text }}</div>
        <!-- 音视频通话 -->
        <div class="content" v-if="item.msgtype === 'voiptext'">此消息暂不支持显示</div>
        <div class="OfficialAccounts" style="height: 100px" @click="handleOpenLink(item)" v-if="item.msgtype === 'link'">
            <div class="Accountsbox">
                <div class="Textarea">
                    <div class="TextareaTitle">{{ item.msgdata.title }}</div>
                    <div class="Textareadescribe">{{ item.msgdata.description }}</div>
                </div>
                <div class="sharePictures"><img :src="item.msgdata.image_url" /></div>
            </div>
        </div>
        <!-- 会话记录消息 -->
        <div class="OfficialAccounts" @click="handleShowCahtRecord(item)" v-if="item.msgtype === 'chatrecord'">
            <div class="chattList">
                <div class="TextareaTitle">{{ item.msgdata.title }}的聊天记录</div>
                <div v-for="c in item.msgdata.item.slice(0, 2)">
                    <div class="chatMessage" v-if="c.type === 'ChatRecordImage'">[图片]</div>
                    <div class="chatMessage" v-if="c.type === 'ChatRecordFile'">[文件]</div>
                    <div class="chatMessage" v-if="c.type === 'ChatRecordText'">{{ toStringJSON(c.content)?.content || '' }}</div>
                </div>
            </div>
        </div>
        <!-- 名片 -->
        <div class="OfficialAccounts" v-if="item.msgtype === 'card'">
            <div class="Accountsbox">
                <div class="sharePicturesCard">
                    <a-avatar :size="52" shape="square" :src="item.msgdata.avatar" v-if="item.msgdata.avatar" />
                    <a-avatar :size="52" v-else shape="square">
                        <template #icon><UserOutlined /></template>
                    </a-avatar>
                </div>
                <div class="TextareaCard">
                    <div class="TextareaTitle">{{ item.msgdata.corpname }}</div>
                    <div class="Textareadescribe-Card">
                        <img
                            src=""
                        />
                        <div class="corpname">微信</div>
                    </div>
                </div>
            </div>
            <div class="Card-sign">名片</div>
        </div>
        <video :src="item.mediaNetworkPath" style="width: 300px" controls v-if="item.msgtype === 'video'"></video>
        <div class="content voice-wrap" v-if="item.msgtype === 'voice'">
            <a-space @click="handleVoice(item)">
                <template v-if="isLeft">
                    <img src="@/assets/finance/voice.gif" alt="" class="voice" v-if="play" />
                    <img src="@/assets/finance/voice.png" alt="" class="voice" v-else />
                </template>
                <div class="voice-time">{{ item.msgdata.play_length }}</div>
                <template v-if="!isLeft">
                    <img src="@/assets/finance/voice.gif" alt="" class="voice" v-if="play" />
                    <img src="@/assets/finance/voice.png" alt="" class="voice" v-else />
                </template>
            </a-space>
            <!-- <audio :src="item.mediaNetworkPath" style="width: 100%"></audio> -->
        </div>
        <a-image
            :height="150"
            :src="item.mediaNetworkPath"
            v-if="item.msgtype === 'image'"
            fallback=""
        ></a-image>
        <!-- 文件 -->
        <a-button type="link" @click="handleDownload(item)" v-if="item.msgtype === 'file'">此消息暂不支持显示，请点击下载查看</a-button>

        <!-- 表情 -->
        <a-image
            :height="75"
            :src="item.mediaNetworkPath"
            v-if="item.msgtype === 'emotion'"
            fallback=""
        ></a-image>
        <div class="content" v-if="item.msgtype === 'mixed'">
            <div v-for="child in item.msgdata" :key="child.id">
                <a-image :src="child.content?.media_network_path" :height="120" v-if="child.type === 'image'"></a-image>
                <template v-if="child.type === 'text'">{{ child.content }}</template>
                <a-image :height="75" :src="item.content?.media_network_path" v-if="child.type === 'emotion'"></a-image>
                <video :src="item.content?.media_network_path" v-if="child.type === 'video'"></video>
            </div>
        </div>
        <!-- 撤回消息 -->
        <div class="revoke" v-if="item.msgtype === 'revoke'">{{ item.senderName }}撤回了一条消息</div>

        <div class="content" v-if="item.msgtype === 'markdown'">【MarkDown格式消息】请前往系统查看，谢谢。</div>
        <div class="content" v-if="item.msgtype === 'location'">【位置】请前往系统查看，谢谢。</div>
        <!-- 互通红包消息 -->
        <div class="content" v-if="item.msgtype === 'external_redpacket'">【互通红包消息】请前往系统查看，谢谢。</div>
        <div class="content" v-if="item.msgtype === 'redpacket'">【红包消息】请前往系统查看，谢谢。</div>
        <!-- 视频号消息 -->
        <div class="content" v-if="item.msgtype === 'sphfeed'">【视频号消息】请前往系统查看，谢谢。</div>

        <div class="OfficialAccounts" v-if="item.msgtype === 'weapp'">
            <div class="Accountsbox">
                <div class="Textareawapp">
                    <div class="TextareaTitlewapp">
                        <img
                            src=""
                        />
                        <div>{{ item.msgdata.title }}</div>
                    </div>
                    <div class="Textareadescribewapp">{{ item.msgdata.displayname }}</div>
                </div>
            </div>
            <div class="Card-sign flex-mode">
                <div class="SmallprogramName">
                    <img
                        src=""
                    />
                    <div>小程序</div>
                </div>
            </div>
        </div>

        <dialog-chat-record ref="dialogChatRecordRef" />
    </div>
</template>

<script lang="ts" setup>
    import { PropType, ref } from 'vue';
    import dialogChatRecord from './dialog-chat-record.vue';
    import { UserOutlined } from '@ant-design/icons-vue';
    import { toStringJSON } from 'xe-utils';
    import { isNotEmpty } from '@/utils/is';

    const props = defineProps({
        item: {
            type: Object as PropType<any>,
            default: () => {},
        },
        isLeft: {
            type: Boolean,
            default: false,
        },
    });

    const dialogChatRecordRef = ref();
    const play = ref<boolean>(false);
    const audioInstance = ref<any>(null);
    const handleDownload = item => {
        const { mediaNetworkPath, msgdata } = item;
        const link = document.createElement('a');
        link.href = mediaNetworkPath;
        link.download = msgdata?.filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };

    const handleVoice = item => {
        console.log(item);

        // if (isNotEmpty(audioInstance.value)) {
        //     audioInstance.value.pause();
        //     play.value = false;
        // } else {
        //     audioInstance.value = new Audio(item.mediaNetworkPath);
        //     audioInstance.value.play();
        //     play.value = true;
        // }
    };

    const handleShowCahtRecord = item => {
        dialogChatRecordRef.value.init(item.msgdata || {});
    };

    const handleOpenLink = item => {
        window.open(item.msgdata.link_url, '_blank');
    };
</script>

<style lang="less">
    .revoke {
        padding: 10px;
        color: #aaa;
        width: 100%;
        align-items: center;
    }
    .content {
        .voice {
            width: 20px;
            height: 20px;
            display: block;
        }
        .voice-time {
            line-height: 20px;
        }
        &.voice-wrap {
            width: 100px;
        }
    }

    .OfficialAccounts {
        width: 220px;
        background-color: #fff;
        border-radius: 5px;
        cursor: pointer;

        .Card-sign {
            font-size: 12px;
            color: #bfbfbf;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            width: 100%;
            height: 25px;
            padding: 0 10px;
            line-height: 25px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border-top: 1px solid #f7f7f7;

            .SmallprogramName {
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -ms-flex-direction: row;
                flex-direction: row;
                font-size: 12px;
                color: #bfbfbf;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                width: 100%;
                height: 22px;
            }

            .SmallprogramName img {
                width: 15px;
                height: 15px;
                margin-right: 4px;
            }
        }

        .Accountsbox {
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;

            .Textareawapp {
                width: 220px;
                padding: 10px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }

            .w200 {
                width: 200px;
            }

            .TextareaTitlewapp {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -ms-flex-direction: row;
                flex-direction: row;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                font-size: 14px;
                font-weight: 700;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .TextareaTitlewapp img {
                width: 16px;
                height: 16px;
                margin-right: 4px;
            }
        }

        .sharePictures {
            height: 100px;
            img {
                width: 60px;
                height: 60px;
            }
        }

        .sharePictures,
        .sharePicturesCard {
            width: 80px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .sharePicturesCard {
            height: 75px;
            img {
                width: 52px;
                height: 52px;
            }
        }

        .corpname {
            height: 34px;
            width: 120px;
            color: #999;
            line-height: 18px;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .Textarea {
            width: 140px;
            padding: 10px 0 10px 10px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .TextareaTitle {
            font-size: 14px;
            font-weight: 700;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .Textareadescribe {
            line-height: 16px;
            font-size: 12px;
            width: 100%;
            -webkit-line-clamp: 3;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .Textareadescribe-Card {
            font-size: 12px;
            width: 120px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;

            img {
                width: 20px;
                height: 20px;
            }
        }

        .Textareadescribewapp {
            line-height: 16px;
            font-size: 12px;
            width: 100%;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 10px;
            height: 30px;
        }

        .TextareaCard {
            padding: 10px 0 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .chattList {
            width: 100%;
            height: 75px;
            padding: 8px 8px 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            cursor: pointer;

            .chatMessage {
                width: 100%;
                font-size: 12px;
                color: #c0c2c1;
                line-height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 5px;
            }
        }
    }
</style>
